{% extends "layout.html" %}
{% block body %}
<!-- 分页样式 -->
<link href="/static/css/zxf_page.css" rel="stylesheet">
<link rel="stylesheet" href="/static/house/css/list.css">
<!-- 分页JS -->
<script src="/static/js/zxf_page.js"></script>


<!-- Page Header -->
<header class="masthead" style="background-image: url('/static/img/home-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
                <div class="site-heading">
                    <h1>二手好房</h1>
                    <span class="subheading">给您推荐优质房源</span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<div class="container">
    <!--当前城市-->
    <div class="row info-line">
        <!-- 模块1标题 -->
        <div class="col-lg-12 tj-header">
            <h3>为你为家</h3>
            <div class="describe">
                <span>为您精准定位，当前城市房源信息</span>
                <span class="float-right"><a href="" style="color: #17a2b8; padding-right: 5px"></a></span>
            </div>
        </div>
        <!-- 模块1信息展示 -->
        <div class="collection col-lg-12 col-md-12">
            <div id="fill-data" class="{{page_num}}">
                {% for item in house_list %}
                <div class="row collection-line">
                    <div class="col-lg-5 col-md-5 mx-auto">
                        <div><a href="/house/{{item.id}}"><img class='img-fluid img-box' src="/static/img/house-bg1.jpg" alt=""></a>
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-5 mx-auto">
                        <div class="collection-line-info">
                            <div class="title">
                                <span><a href="/house/{{item.id}}">{{item.title | dealover}}</a></span>
                            </div>
                            <div>
                                <span class="attribute-text">房源地址：</span>
                                &nbsp
                                <span class="info-text">{{item.address}} </span>
                            </div>
                            <div>
                                <span class="attribute-text">建筑面积：</span>
                                &nbsp
                                <span class="info-text">{{item.area}}平方米</span>
                            </div>
                            <div>
                                <span class="attribute-text">房源户型：</span>
                                &nbsp
                                <span class="info-text">{{item.rooms}}</span>
                            </div>
                            <div>
                                <span class="attribute-text">房源朝向：</span>
                                &nbsp
                                <span class="info-text">{{item.direction | dealdirection}}</span>
                            </div>
                            <div>
                                <span class="attribute-text">交通条件：</span>
                                &nbsp
                                <span class="info-text">{{item.traffic | dealdirection}}</span>
                            </div>

                            <div>
                                <span class="attribute-text"><i class="fa fa-heart" aria-hidden="true"
                                        style="color: #e74c3c"></i>{{item.page_views}}人浏览过</span>
                                &nbsp
                                <span class="info-text"></span>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-2 col-md-2 mx-auto">
                        <div class="info-more">
                            <span class="info-text" style="color: #e74c3c">￥&nbsp{{item.price}}</span>
                            <span><a href="/house/{{item.id}}"><i class="fa fa-arrow-right" aria-hidden="true"></i></a></span>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <div class="row my-page-line">
                <div class="col-lg-12 col-md-12 mx-auto">
                    <!-- 分页容器 -->
                    <div class="zxf_pagediv"></div>
                </div>
            </div>
        </div>

        <!-- 右边栏信息展示 -->
        <div class="col-lg-2">
            <div class="row">
            </div>
        </div>

    </div>
</div>
<hr>

<script>
    $(".zxf_pagediv").createPage({
        pageNum: {{total_num}},//总页码
        current: Number($("#fill-data").attr("class")),//当前的页码
        backfun: function (e) {
            // 获取当前页
            let n_current = e.current
            // 获取当前页的地址
            let path = location.pathname
            let path_list = path.split('/');
            // 点击时转换当前点击的页码
            path_list[3] = n_current
            let url = path_list.join('/')
            // 重新加载
            location.replace(url)
            // location.href = url
        }        
    });
</script>

{% endblock %}